<template>
	<view class="order-detail-bg">
		<!-- 物流状态 -->
		<view class="order-card delivery-card">
			<view class="delivery-row">
				<text class="iconfont">&#xe6b7;</text>
				<view class="delivery-info">
					<view class="delivery-title">订单状态：<text class="status">{{ orderDetail.status_text }}</text></view>
					<view class="delivery-desc">预计发货：{{ orderDetail.create_time }}</view>
				</view>
			</view>
		</view>

		<!-- 收货信息 -->
		<view class="order-card contact-card">
			<view class="contact-row">
				<text class="iconfont">&#xe600;</text>
				<text class="contact-label">收货人</text>
				<text class="contact-value">张三</text>
			</view>
			<view class="contact-row">
				<text class="iconfont">&#xe601;</text>
				<text class="contact-label">电话</text>
				<text class="contact-value">13888888888</text>
			</view>
			<view class="contact-row">
				<text class="iconfont">&#xe602;</text>
				<text class="contact-label">地址</text>
				<text class="contact-value">北京市海淀区XXX路88号</text>
			</view>
		</view>

		<!-- 商品信息 -->
		<view class="order-card goods-card">
			<view class="goods-row">
				<image class="goods-thumb" src="https://img1.imgtp.com/2023/10/08/9h5Ck1nJ.jpg"></image>
				<view class="goods-info">
					<view class="goods-title">{{ orderDetail.goods_name }}</view>
					<view class="goods-extra">
						<text>x{{ orderDetail.goods_num }}</text>
						<text class="score">积分：{{ orderDetail.score }}</text>
					</view>
				</view>
			</view>
			<view class="goods-row-attr">
				<text class="attr-label">属性：</text>
				<text class="attr-value">颜色：黑色 容量：500ml</text>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="order-card orderinfo-card">
			<view class="orderinfo-row">
				<text class="orderinfo-label">订单编号</text>
				<text class="orderinfo-value">{{ orderDetail.id }}</text>
				<text class="copy-btn" @click="copyId">复制</text>
			</view>
			<view class="orderinfo-row">
				<text class="orderinfo-label">下单时间</text>
				<text class="orderinfo-value">{{ orderDetail.create_time }}</text>
			</view>
			<view class="orderinfo-row">
				<text class="orderinfo-label">支付方式</text>
				<text class="orderinfo-value">积分支付</text>
			</view>
		</view>

		<!-- 金额 -->
		<view class="order-card amount-card">
			<view class="amount-row">
				<text>积分抵扣</text>
				<text class="amount">-{{ orderDetail.score }}分</text>
			</view>
			<view class="line"></view>
			<view class="amount-row">
				<text>实付金额</text>
				<text class="pay-amount">￥{{ orderDetail.pay_amount }}</text>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="order-footer">
			<view class="footer-left">
				<text class="footer-label">合计</text>
				<text class="footer-amount">￥{{ orderDetail.pay_amount }}</text>
			</view>
			<button class="pay-btn" type="primary" disabled>已支付</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderDetail: {},
				loading: true,
			};
		},
		onLoad(options) {
			const orderId = options.id || "";
			this.getOrderDetail(orderId);
		},
		methods: {
			getOrderDetail(id) {
				setTimeout(() => {
					this.orderDetail = {
						id: id,
						goods_name: "积分商城专属运动水杯 运动吸管杯 大容量便携",
						goods_num: 2,
						score: 300,
						status_text: "待发货",
						create_time: "2025-07-04 12:34:56",
						pay_amount: "0.50"
					};
					this.loading = false;
				}, 300);
			},
			copyId() {
				uni.setClipboardData({
					data: this.orderDetail.id,
					success: () => {
						uni.showToast({
							title: '已复制',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style>
	/* 让卡片铺满全屏，字号大，内外边距减少，底部栏加大 */
	.order-detail-bg {
		min-height: 100vh;
		background: #232323;
		padding: 20rpx 0 140rpx 0;
	}

	/* 卡片 */
	.order-card:nth-child(1) {
		margin:0 auto !important
	}
	.order-card {
		background: #313131;
		border-radius: 24rpx;
		margin: 20rpx auto;
		padding: 42rpx 32rpx;
		width: 90%;
		
		box-sizing: border-box;
		box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
	}

	/* 物流状态 */
	.delivery-row {
		display: flex;
		align-items: center;
	}

	.delivery-info {
		margin-left: 24rpx;
	}

	.delivery-title {
		color: #fff;
		font-size: 36rpx;
		margin-bottom: 6rpx;
	}

	.status {
		color: #FFD600;
		font-weight: bold;
		font-size: 36rpx;
	}

	.delivery-desc {
		color: #bdbdbd;
		font-size: 28rpx;
		margin-top: 8rpx;
	}

	.delivery-card .iconfont {
		font-size: 60rpx;
		color: #FFD600;
	}

	/* 收货人信息 */
	.contact-row {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.contact-label {
		color: #bdbdbd;
		font-size: 32rpx;
		margin: 0 22rpx 0 0;
	}

	.contact-value {
		color: #fff;
		font-size: 32rpx;
		flex: 1;
	}

	.contact-card .iconfont {
		font-size: 40rpx;
		color: #FFD600;
		margin-right: 18rpx;
	}

	/* 商品信息 */
	.goods-row {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.goods-thumb {
		width: 120rpx;
		height: 120rpx;
		border-radius: 16rpx;
		background: #232323;
		margin-right: 24rpx;
	}

	.goods-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.goods-title {
		color: #fff;
		font-size: 34rpx;
		font-weight: bold;
		margin-bottom: 14rpx;
	}

	.goods-extra {
		display: flex;
		align-items: center;
		gap: 30rpx;
		font-size: 30rpx;
		color: #bdbdbd;
	}

	.score {
		color: #FFD600;
	}

	.goods-row-attr {
		margin-left: 144rpx;
		/* 跟图片对齐 */
		color: #bdbdbd;
		font-size: 28rpx;
		margin-top: 6rpx;
	}

	.attr-label {
		color: #FFD600;
		margin-right: 16rpx;
	}

	.attr-value {
		color: #bdbdbd;
	}

	/* 订单信息 */
	.orderinfo-row {
		display: flex;
		align-items: center;
		margin-bottom: 14rpx;
		font-size: 28rpx;
	}

	.orderinfo-label {
		color: #bdbdbd;
		min-width: 160rpx;
		font-size: 28rpx;
	}

	.orderinfo-value {
		color: #fff;
		flex: 1;
		word-break: break-all;
		font-size: 28rpx;
	}

	.copy-btn {
		color: #FFD600;
		margin-left: 16rpx;
		font-size: 28rpx;
	}

	/* 金额 */
	.amount-row {
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		color: #fff;
		padding: 12rpx 0;
	}

	.amount {
		color: #FFD600;
		font-weight: bold;
		font-size: 32rpx;
	}

	.pay-amount {
		color: #FFD600;
		font-size: 40rpx;
		font-weight: bold;
	}

	.line {
		height: 1rpx;
		background: #444;
		margin: 14rpx 0;
	}

	/* 底部 */
	.order-footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 120rpx;
		display: flex;
		align-items: center;
		background: #232323;
		box-shadow: 0 -4rpx 32rpx rgba(0, 0, 0, .1);
		padding: 0 36rpx;
		z-index: 99;
	}

	.footer-left {
		flex: 1;
		display: flex;
		align-items: baseline;
	}

	.footer-label {
		color: #bdbdbd;
		font-size: 32rpx;
		margin-right: 18rpx;
	}

	.footer-amount {
		color: #FFD600;
		font-size: 46rpx;
		font-weight: bold;
	}

	.pay-btn {
		width: 300rpx;
		height: 92rpx;
		background: #FFD600;
		color: #222;
		border: none;
		border-radius: 16rpx;
		font-size: 36rpx;
		font-weight: bold;
		margin-left: 24rpx;
		line-height: 92rpx;
	}

	.pay-btn[disabled] {
		opacity: 0.7;
	}

	/* 字体超出省略 */
	.ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>